<template>
  <page-card title="职级管理">
    <div class="rank-list">
      <div class="rank-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
            <a-button type="primary"
                      icon="plus"
                      action
                      @click="handleEdit('')">
              新增
            </a-button>
          </a-col>
          <a-col>
            <a-input-search v-model="params.occName"
                            placeholder="职级名称"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </div>
      <div class="rank-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => index"
                 :pagination="false">
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleEdit(item.id)">编辑</a>
            </template>
            <a-divider type="vertical" />
            <template>

              <a-popconfirm title="确定要删除吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="handleDelete(item.id)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>

    </div>
  </page-card>
</template>

<script>
import { getRankList, deleteRank } from '../../api/job/rank'
export default {
  name: 'RankManagementList',
  components: {},
  data () {
    return {
      // pagination: PAGINATION,
      // page: {
      //   currPage: 1,
      //   pageSize: 10
      // },
      params: {
        // 查询条件
        occName: ''
        // occCode: ''
        // occLevel: null
      },
      dataList: [],
      columns: [
        {
          title: '序号',
          width: 100,
          align: 'center',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '职级名称',
          align: 'center',
          dataIndex: 'occName',
          ellipsis: true,
          scopedSlots: { customRender: 'tl' }
        },
        {
          title: '职级编码',
          align: 'center',
          dataIndex: 'occCode',
          ellipsis: true
        },
        {
          title: '职业等级',
          align: 'center',
          dataIndex: 'occLevel',
          ellipsis: true
        },
        {
          title: '排序号',
          align: 'center',
          dataIndex: 'orderNo',
          ellipsis: true
        },
        {
          title: '操作',
          width: 130,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    if (!this.$route.meta.keepAlive) {
      this.getList()
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    // 搜索
    search () {
      this.dataList = []
      this.getList()
    },
    // 列表数据
    getList () {
      getRankList(this.params).then(res => {
        this.dataList = res || []
      })
    },
    // 新增、修改
    handleEdit (id) {
      this.$router.push({
        path: './rank/edit',
        query: { id: id }
      })
    },
    // 删除
    handleDelete (id) {
      deleteRank(id).then((res) => {
        // this.message.info('删除成功！')
        this.getList()
      })
    },
    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      // this.pagination = pagination
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.rank-list {
  &-tools {
  }
  &-panel {
  }
}
</style>